// pages/progress/progress.js
const app = getApp();

Page({
  /**
   * 页面的初始数据
   */
  data: {
    chartPeriod: 'week', // week or month
    totalWordsLearned: 0,
    learningDays: 0,
    completionRate: 0,
    timelineData: [],
    userInfo: {
      nickname: '',
      avatar: '',
      gender: 0,
      country: '',
      province: '',
      city: '',
      authorized: false
    }
  },

  // 数据管理器实例
  wordDataManager: null,
  wordLearningDataManager: null,
  storageManager: null,

  /**
   * 页面加载时执行
   */
  onLoad: function() {
    // 初始化数据管理器 - 使用全局实例
    this.storageManager = app.globalData.storageManager;
    this.wordDataManager = app.globalData.wordDataManager;
    this.wordLearningDataManager = app.globalData.wordLearningDataManager;
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
    // 页面渲染完成后初始化图表
    this.initLearningChart();
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    const userInfo = this.storageManager.getStorage(this.storageManager.STORAGE_KEYS.USER_INFO)
    console.log('userInfo:', userInfo);
    this.setData({ userInfo: userInfo || {} });
    // 每次显示页面时加载最新数据
    this.loadLearningData();
  },

  /**
   * 加载学习数据
   */
  loadLearningData() {
    try {
      // 获取所有单词
      const allWords = Object.values(this.wordDataManager.getAllWords());
      const totalWords = allWords.length;
      
      // 计算已学习单词数
      const learnedWords = allWords.filter(word => 
        this.wordLearningDataManager.getWordLearnedStatus(word.id)
      );
      const totalWordsLearned = learnedWords.length;
      
      // 计算完成率
      const completionRate = totalWords > 0 ? 
        Math.round((totalWordsLearned / totalWords) * 100) : 0;
      
      // 计算学习天数
      const learningDays = this.calculateLearningDays(learnedWords);
      
      // 构建时间轴数据
      const timelineData = this.buildTimelineData(learnedWords);
      
      // 更新页面数据
      this.setData({
        totalWordsLearned,
        learningDays,
        completionRate,
        timelineData
      });
      
      // 重新初始化图表
      this.initLearningChart();
    } catch (error) {
      console.error('加载学习数据失败:', error);
    }
  },

  /**
   * 计算学习天数
   * @param {Array} learnedWords - 已学习的单词数组
   * @returns {number} 学习天数
   */
  calculateLearningDays(learnedWords) {
    if (!learnedWords || learnedWords.length === 0) {
      return 0;
    }
    
    // 收集所有学习日期
    const learningDates = new Set();
    
    learnedWords.forEach(word => {
      // 获取最后学习时间
      const lastLearnTime = this.wordLearningDataManager.getWordLastLearnTime(word.id);
      if (lastLearnTime) {
        // 提取日期部分（忽略时间）
        const date = new Date(lastLearnTime);
        const dateStr = date.toISOString().split('T')[0];
        learningDates.add(dateStr);
      }
      
      // 注意：复习历史现在由WordLearningDataManager管理
      // 目前没有直接的API获取复习历史中的日期，所以这部分功能可能需要调整
    });
    
    // 返回不同学习日期的数量
    return learningDates.size;
  },

  /**
   * 构建时间轴数据
   * @param {Array} learnedWords - 已学习的单词数组
   * @returns {Array} 时间轴数据
   */
  buildTimelineData(learnedWords) {
    if (!learnedWords || learnedWords.length === 0) {
      return [];
    }
    
    // 按日期分组学习记录
    const dateGroups = {};
    
    learnedWords.forEach(word => {
      // 处理初始学习
      const lastLearnTime = this.wordLearningDataManager.getWordLastLearnTime(word.id);
      if (lastLearnTime) {
        const date = new Date(lastLearnTime);
        const dateStr = this.formatDate(date);
        
        if (!dateGroups[dateStr]) {
          dateGroups[dateStr] = {
            date: dateStr,
            wordsLearned: 0,
            reviewedWords: 0,
            studyTime: 0,
            achievements: []
          };
        }
        
        // 获取学习次数
          const learnCount = this.wordLearningDataManager.getWordLearnCount(word.id);
        
        // 根据学习次数判断是新学还是复习
        if (learnCount === 1) {
          dateGroups[dateStr].wordsLearned += 1;
          // 假设每个新学单词平均耗时2分钟
          dateGroups[dateStr].studyTime += 2;
        } else {
          dateGroups[dateStr].reviewedWords += 1;
          // 假设每个复习单词平均耗时1分钟
          dateGroups[dateStr].studyTime += 1;
        }
        
        // 添加成就标签
        if (learnCount === 5) {
          dateGroups[dateStr].achievements.push(`掌握单词: ${word.english}`);
        }
      }
      
      // 注意：复习历史现在由WordLearningDataManager管理
      // 目前没有直接的API获取复习历史记录，所以这部分功能可能需要调整
      // 可以考虑在WordLearningDataManager中添加获取复习历史的方法
    });
    
    // 转换为数组并按日期排序（最新的在前）
    const timelineData = Object.values(dateGroups).sort((a, b) => {
      return new Date(b.date) - new Date(a.date);
    });
    
    // 添加特殊成就
    timelineData.forEach(item => {
      if (item.wordsLearned >= 10) {
        item.achievements.push('今日学习小达人');
      }
      if (item.studyTime >= 30) {
        item.achievements.push('学习时长超过30分钟');
      }
      // 去重成就标签
      item.achievements = [...new Set(item.achievements)];
    });
    
    return timelineData;
  },

  /**
   * 格式化日期
   * @param {Date} date - 日期对象
   * @returns {string} 格式化后的日期字符串
   */
  formatDate(date) {
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    return `${year}-${month}-${day}`;
  },

  /**
   * 初始化学习趋势图表
   */
  initLearningChart() {
    try {
      // 获取canvas上下文
      const ctx = wx.createCanvasContext('learningChart', this);
      
      // 获取时间轴数据
      const { timelineData, chartPeriod } = this.data;
      
      // 根据图表周期过滤数据
      let chartData = [];
      const now = new Date();
      
      if (chartPeriod === 'week') {
        // 获取最近7天的数据
        chartData = this.getRecentDaysData(timelineData, 7);
      } else {
        // 获取最近30天的数据
        chartData = this.getRecentDaysData(timelineData, 30);
      }
      
      // 如果没有数据，显示空状态
      if (chartData.length === 0) {
        this.drawEmptyChart(ctx);
        return;
      }
      
      // 绘制图表
      this.drawChart(ctx, chartData);
    } catch (error) {
      console.error('初始化图表失败:', error);
    }
  },

  /**
   * 获取最近N天的数据
   * @param {Array} timelineData - 完整时间轴数据
   * @param {number} days - 天数
   * @returns {Array} 过滤后的数据
   */
  getRecentDaysData(timelineData, days) {
    const result = [];
    const now = new Date();
    
    // 创建日期映射
    const dateMap = {};
    timelineData.forEach(item => {
      dateMap[item.date] = item;
    });
    
    // 生成最近N天的日期
    for (let i = days - 1; i >= 0; i--) {
      const date = new Date(now);
      date.setDate(date.getDate() - i);
      const dateStr = this.formatDate(date);
      
      // 如果当天有数据，使用实际数据；否则使用默认值
      const dayData = dateMap[dateStr] || {
        date: dateStr,
        wordsLearned: 0,
        reviewedWords: 0,
        studyTime: 0
      };
      
      result.push(dayData);
    }
    
    return result;
  },

  /**
   * 绘制图表
   * @param {CanvasContext} ctx - canvas上下文
   * @param {Array} chartData - 图表数据
   */
  drawChart(ctx, chartData) {
    const canvasWidth = 300; // 简化处理，实际应该获取canvas实际宽度
    const canvasHeight = 200;
    const margin = { top: 20, right: 20, bottom: 40, left: 40 };
    
    // 清空画布
    ctx.clearRect(0, 0, canvasWidth, canvasHeight);
    
    // 计算绘制区域
    const drawWidth = canvasWidth - margin.left - margin.right;
    const drawHeight = canvasHeight - margin.top - margin.bottom;
    
    // 找到最大值用于缩放
    const maxValue = Math.max(
      ...chartData.map(item => item.wordsLearned + item.reviewedWords),
      10 // 确保至少有一个合理的最大值
    );
    
    // 绘制坐标轴
    ctx.beginPath();
    ctx.strokeStyle = '#ddd';
    ctx.lineWidth = 1;
    
    // X轴
    ctx.moveTo(margin.left, canvasHeight - margin.bottom);
    ctx.lineTo(canvasWidth - margin.right, canvasHeight - margin.bottom);
    
    // Y轴
    ctx.moveTo(margin.left, margin.top);
    ctx.lineTo(margin.left, canvasHeight - margin.bottom);
    ctx.stroke();
    
    // 绘制柱状图
    const barWidth = drawWidth / (chartData.length * 2 + 1);
    const gap = barWidth / 2;
    
    chartData.forEach((item, index) => {
      const x = margin.left + index * barWidth * 2 + gap;
      
      // 新学单词柱形
      const learnedHeight = (item.wordsLearned / maxValue) * drawHeight;
      ctx.fillStyle = '#845EC2';
      ctx.fillRect(x, canvasHeight - margin.bottom - learnedHeight, barWidth, learnedHeight);
      
      // 复习单词柱形
      const reviewedHeight = (item.reviewedWords / maxValue) * drawHeight;
      ctx.fillStyle = '#FF6B6B';
      ctx.fillRect(x + barWidth + gap, canvasHeight - margin.bottom - reviewedHeight, barWidth, reviewedHeight);
      
      // 绘制日期标签
      ctx.fillStyle = '#666';
      ctx.font = '10px sans-serif';
      ctx.textAlign = 'center';
      ctx.fillText(item.date.split('-').slice(1).join('/'), x + barWidth + gap, canvasHeight - margin.bottom + 15);
    });
    
    // 绘制图例
    ctx.font = '12px sans-serif';
    ctx.textAlign = 'left';
    
    // 新学单词图例
    ctx.fillStyle = '#845EC2';
    ctx.fillRect(margin.left, margin.top - 15, 12, 6);
    ctx.fillStyle = '#666';
    ctx.fillText('新学', margin.left + 20, margin.top - 10);
    
    // 复习单词图例
    ctx.fillStyle = '#FF6B6B';
    ctx.fillRect(margin.left + 80, margin.top - 15, 12, 6);
    ctx.fillStyle = '#666';
    ctx.fillText('复习', margin.left + 100, margin.top - 10);
    
    // 绘制图表
    ctx.draw();
  },

  /**
   * 绘制空图表
   * @param {CanvasContext} ctx - canvas上下文
   */
  drawEmptyChart(ctx) {
    const canvasWidth = 300;
    const canvasHeight = 200;
    
    // 清空画布
    ctx.clearRect(0, 0, canvasWidth, canvasHeight);
    
    // 绘制背景图案
    ctx.beginPath();
    ctx.fillStyle = '#f8f8f8';
    ctx.arc(canvasWidth / 2, canvasHeight / 2 - 20, 40, 0, 2 * Math.PI);
    ctx.fill();
    
    // 绘制书本图标
    ctx.fillStyle = '#e0e0e0';
    // 书本轮廓
    ctx.fillRect(canvasWidth / 2 - 20, canvasHeight / 2 - 30, 40, 40);
    // 书本装饰
    ctx.fillStyle = '#d0d0d0';
    ctx.fillRect(canvasWidth / 2 - 20, canvasHeight / 2 - 30, 8, 40);
    ctx.fillRect(canvasWidth / 2 - 20, canvasHeight / 2 - 5, 40, 2);
    
    // 绘制主要提示文本
    ctx.fillStyle = '#666';
    ctx.font = 'bold 16px sans-serif';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText('暂无学习数据', canvasWidth / 2, canvasHeight / 2 + 25);
    
    // 绘制引导文本
    ctx.fillStyle = '#999';
    ctx.font = '12px sans-serif';
    ctx.fillText('开始你的学习之旅吧！', canvasWidth / 2, canvasHeight / 2 + 45);
    
    // 绘制图表
    ctx.draw();
  },

  /**
   * 切换图表周期
   * @param {Object} e - 事件对象
   */
  changeChartPeriod(e) {
    const period = e.currentTarget.dataset.period;
    this.setData({
      chartPeriod: period
    });
    this.initLearningChart();
  },

  /**
   * 查看全部历史记录
   */
  viewAllHistory() {
    this.triggerEvent('viewallhistory');
  },

  /**
   * 处理昵称编辑事件
   */
  onEditNickname(e) {
    const newNickname = e.detail.nickname;
    const updatedUserInfo = {
      ...this.data.userInfo,
      nickname: newNickname
    };
    this.setData({
      userInfo: updatedUserInfo
    });
    // 保存到本地存储
    this.storageManager.setStorage(this.storageManager.STORAGE_KEYS.USER_INFO, updatedUserInfo);
    // 更新全局用户信息
    app.updateUserInfoInGlobal(updatedUserInfo);
  },

  /**
   * 处理用户信息授权事件
   */
  onUserInfoAuthorized(e) {
    const userInfo = e.detail.userInfo;
    this.setData({
      userInfo: userInfo
    });
    // 保存到本地存储
    this.storageManager.setStorage(this.storageManager.STORAGE_KEYS.USER_INFO, userInfo);
    // 更新全局用户信息
    app.updateUserInfoInGlobal(userInfo);
    
     // 调用云函数保存用户信息到数据库
     wx.cloud.callFunction({
       name: 'updateUser',
       data: {
        userInfo
       }
     }).then(res => {
       console.log('用户信息已保存到云数据库', res);
     }).catch(err => {
       console.error('保存用户信息到云数据库失败：', err);
     });
   },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
    this.loadLearningData();
    wx.stopPullDownRefresh();
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
    // 这里可以实现加载更多历史记录的功能
  },
  
  // 转发给朋友
  onShareAppMessage: function() {
    return {
      title: '拾刻学习 - 我的学习进度',
      path: '/pages/profile/profile',
      // imageUrl: '/images/map.png'
    };
  },
  
  // 分享到朋友圈
  onShareTimeline: function() {
    return {
      title: '拾刻学习 - 我的学习进度',
      query: 'from=timeline',
      // imageUrl: '/images/map.png'
    };
  }
})